//FishBoneDiagram 组件
<template>
  <div class="patentRoadmap">
    <div
      id="technologyTopicTrends"
      class="FishBoneDiagram"
      :style="{
        padding: `${RowH * pSize + 30}px 0`,
      }"
      v-show="mydata.length"
    >
      <div class="FishBoneContent">
        <div class="fish f_head">
          <img src="@/assets/img/IR/fish_head.svg" />
        </div>
        <div class="fish f_tail">
          <img src="@/assets/img/IR/fish_tail.svg" />
        </div>
        <template v-if="ShowPage">
          <template v-for="(Level1Item, Level1ItemIdx) in mydata">
            <!--第一级容器-->
            <div
              :key="Level1ItemIdx"
              class="Level1Content"
              :style="{
                right: Level1Item.rightValue + 'px',
                width: Level1Item.width + 'px',
              }"
            >
              <!--第一级斜线-->
              <div class="Level1Line" :style="{ height: Level1LineHeight }">
                <span class="Level1Text">{{ Level1Item.time }}</span>
              </div>
              <div
                class="Level1ChildrenContent"
                :class="Level1ItemIdx % 2 === 0 ? '' : 'bottomContent'"
              >
                <template
                  v-if="
                    Level1Item.hasOwnProperty('children') &&
                      Level1Item.children.length > 0
                  "
                >
                  <template
                    v-for="(Level2Item, Level2ItemIdx) in Level1Item.children"
                  >
                    <div
                      class="Level1ChildItem"
                      :style="{
                        transform: `translate(${ReturnStyle(
                          Level2Item,
                          Level2ItemIdx,
                          Level1Item
                        )}px,0)`,
                      }"
                    >
                      <div class="LevelText">
                        <!-- :style="{ height: `${RowH}px` }" -->
                        <p class="num">{{ Level2ItemIdx + 1 }}.</p>
                        <div class="detail">
                          <p class="pn">{{ Level2Item.pn }}</p>
                          <p
                            class="ttl ellipsis-2"
                            @click="handleClick(Level2Item.pn)"
                            v-html="
                              Level2Item.ttl_zh ||
                                Level2Item.ttl ||
                                Level2Item.ttl_en
                            "
                          ></p>
                        </div>
                        <p class="score">{{ Math.ceil(Level2Item.j || 0) }}</p>
                      </div>
                    </div>
                  </template>
                </template>
              </div>
            </div>
          </template>
        </template>
      </div>
    </div>
    <div class="pr-table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="ttl" label="专利名称" width="300">
          <template slot-scope="scope">
            <p
              class="ttl"
              @click="handleClick(scope.row.pn)"
              v-html="scope.row.ttl_zh || scope.row.ttl || scope.row.ttl_en"
            ></p>
          </template>
        </el-table-column>
        <el-table-column prop="pn" label="公开/公告号" width="160">
        </el-table-column>
        <el-table-column prop="apd" label="专利申请日" width="100">
        </el-table-column>
        <el-table-column prop="j" label="技术价值度" width="100">
          <template slot-scope="scope">
            {{ Math.ceil(scope.row.j || 0) }}
          </template>
        </el-table-column>
        <el-table-column prop="abst_zh" label="专利摘要">
          <template slot-scope="scope">
            <p
              class="ellipsis-2"
              v-html="
                scope.row.abst_zh || scope.row.abst || scope.row.abst_en || '本专利无摘要信息'
              "
            ></p>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "FishBoneDiagram",
  props: {
    patentLoading: {
      type: Boolean,
      default: false,
    },
    patentData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    patentSize: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      Title: "鱼骨图",
      pSize: 0,
      mydata: [
        // {
        //   time: "2023",
        //   children: [
        //     {
        //       ttl: "太阳能电池片及太阳能电",
        //       pn: "CN20022765148.3",
        //     },
        //     {
        //       ttl: "太阳能电池片及太阳能电池",
        //       pn: "CN20202765148.4",
        //     },
        //   ],
        // },
      ],
      ContentWidth: 0,
      ContentHeight: 0,
      Level1LineHeight: 300, //第一级斜线长度
      Level1ItemHeight: 300, //第一级容器高度
      Level1ItemMaxH: 1, //第一级最多的子级个数
      // Level1ChildLineW: 120, //第一级子级的线宽
      RowH: 60,
      ShowPage: false,
      tableData: [
        // {
        //   ttl: "太阳能电池片及太阳能电池",
        //   pn: "CN202022765148.8",
        //   apd: "2020-11-25",
        //   abst_zh:
        //     "本实用新型涉及一种太阳能电池片及太阳能电池，太阳能电池片包括硅片基板，包括沿第一方向相背设置的第一表面和第二表面，在所述第一表面和所述第二表面分别掺杂形成至少一个P型掺杂区域和至少一个N型掺杂区域，其中沿所述第一表面的第二方向和所述第二表面的第二方向，所述P型掺杂区域和所述N型掺杂区域交替设置，沿所述第一方向，设置在所述第一表面的所述P型掺杂区域与设置在所述第二表面的所述N型掺杂区域相对设置",
        // },
      ],
    };
  },
  watch: {
    patentLoading: {
      handler(newVal) {
        if (newVal) {
          this.pSize = 0;
          this.tableData = [];
          this.mydata = [];
        }
      },
      deep: true,
    },
    patentData: {
      handler(newVal) {
        this.handleData(newVal);
      },
      deep: true,
    },
  },
  mounted() {
    // this.ResetContentWidth();
  },
  methods: {
    //
    handleData(data) {
      // console.log("data", data);
      if (Object.keys(data).length == 0) {
        return;
      }
      this.pSize = this.patentSize;
      let timeData = [],
        tableData = [];
      for (let i in data) {
        // console.log("i", i, data[i]);
        if (data[i].length == 0) {
          continue;
        }
        timeData.push({
          time: i,
          children: data[i],
        });
        tableData.push(...data[i]);
      }
      this.mydata = JSON.parse(JSON.stringify(timeData)).reverse();
      this.tableData = tableData;
      this.$nextTick(() => {
        this.ResetContentWidth();
      });
    },
    //获取第一级容器样式。
    GetLevelItem1Style() {
      let mydata = JSON.parse(JSON.stringify(this.mydata));
      let ItemMargin = 20;
      let itemWidth =
        (this.ContentWidth - 100) / Math.ceil(mydata.length / 2) - ItemMargin;
      for (let i = 0; i < mydata.length; i++) {
        let rightValue = 0;
        if (i <= 1) {
          rightValue = 50;
        } else {
          if (i % 2 === 0) {
            rightValue =
              this.mydata[i - 1]["rightValue"] + itemWidth + ItemMargin;
          } else {
            rightValue =
              this.mydata[i - 2]["rightValue"] + itemWidth + ItemMargin;
          }
        }

        // let Level1ChildLineW = itemWidth / 2;
        // if (Level1ChildLineW > 120) {
        //   Level1ChildLineW = 120;
        // }
        // this.Level1ChildLineW = Level1ChildLineW;

        this.mydata[i]["width"] = itemWidth;
        this.mydata[i]["height"] = this.Level1ItemHeight;
        // console.log("---", this.mydata[i]);
        if (this.mydata[i].position == "top") {
          rightValue -= 50;
        } else {
          rightValue += 10;
        }
        this.mydata[i]["rightValue"] = rightValue;
      }
      // console.log(JSON.parse(JSON.stringify(this.mydata)));
    },
    //计算每一项的位置。
    GetItemTextStyle() {
      let mydata = this.mydata;
      let Level1ItemMaxH = 1; //第一级容器内最大高度
      let SetItemStyle = (item) => {
        let level = item.level;
        let currentItem = JSON.parse(JSON.stringify(item));
        if (!currentItem.hasOwnProperty("level")) {
          currentItem["level"] = level + 1;
        }
        if (item.hasOwnProperty("children") && item.children.length > 0) {
          for (let i = 0; i < item.children.length; i++) {
            let ArrItem = item.children[i];
            ArrItem["level"] = currentItem.level + 1;
            ArrItem["index"] = i;
            ArrItem["len"] = 1;
            SetItemStyle(ArrItem);
            item.len += ArrItem["len"];
          }
        }
      };

      for (let i = 0; i < mydata.length; i++) {
        let itemLevel1 = mydata[i];
        itemLevel1["level"] = 1;
        itemLevel1["index"] = i;
        itemLevel1["len"] = 0;
        if (i % 2 === 0) {
          itemLevel1["position"] = "top";
        } else {
          itemLevel1["position"] = "bottom";
        }

        SetItemStyle(itemLevel1);

        if (Level1ItemMaxH < itemLevel1["len"]) {
          Level1ItemMaxH = itemLevel1["len"];
        }
      }

      this.Level1ItemMaxH = Level1ItemMaxH;
      // console.log(this.Level1ItemMaxH)
      // console.log(JSON.parse(JSON.stringify(mydata)));
    },
    ReturnStyle(item, itemIdx, parent) {
      // console.log(Level1Item)
      let TranslateX = 0;
      // let RowH = this.RowH || 60;
      let lenH = item.len;
      for (let i = 0; i < parent.children.length; i++) {
        let brotherLen = parent.children[i];
        if (i > itemIdx) {
          lenH += brotherLen.len;
        }
      }
      // console.log(lenH);
      let x = 0.58;
      let HCurrent = lenH * 58 - 40;
      if (parent["position"] === "top") {
        HCurrent = (parent.len - lenH) * 58 + 20;
      }
      // TranslateX = `-${HCurrent / Math.tan(Math.PI / 3)}`;
      // console.log("HCurrent:", HCurrent);
      TranslateX = `-${HCurrent * x}`;
      TranslateX = TranslateX - 1;
      return TranslateX;
    },
    // 点击跳转至详情页
    handleClick(pn) {
      this.$nextTick(() => {
        let routerUrl = this.$router.resolve({
          name: "DataCenterDetail",
          query: {
            id: pn,
            type: "patent",
            left: false,
          },
        });
        window.open(routerUrl.href, "_blank");
      });
    },
    //获取容器的宽高
    ResetContentWidth() {
      this.ShowPage = false;
      this.GetItemTextStyle();
      this.ContentWidth = $(".FishBoneContent")[0].clientWidth;
      this.ContentHeight = $(".FishBoneDiagram")[0].clientHeight;
      // console.log(this.ContentWidth)
      // console.log(this.ContentHeight)
      //给第一级容器高度赋值。
      this.Level1ItemHeight = (this.ContentHeight - 70) / 2;

      //给行高赋值
      // let RowH = this.RowH;
      // console.log(this.Level1ItemHeight,this.Level1ItemMaxH)
      // let MaxRowH = Math.ceil(this.Level1ItemHeight / this.Level1ItemMaxH);
      // if (MaxRowH > RowH) {
      //   this.RowH = MaxRowH;
      // }
      // console.log(this.RowH);
      //给第一级容器斜线长度赋值。
      let Level1LineHeight = this.Level1ItemHeight / Math.sin(Math.PI / 3);
      let Level1ItemMaxH = this.Level1ItemMaxH;
      let MaxH = Level1ItemMaxH * this.RowH;
      // console.log('MaxH',MaxH);
      // console.log('Level1LineHeight',Level1LineHeight);
      if (MaxH > Level1LineHeight) {
        Level1LineHeight = MaxH;
      }

      this.Level1LineHeight = Level1LineHeight + "px";
      //给第一级容器样式赋值。
      this.GetLevelItem1Style();

      this.ShowPage = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.patentRoadmap {
  margin-top: 10px;
  .pr-table {
    margin-top: 25px;
  }
  .ttl {
    cursor: pointer;
  }
}
.FishBoneDiagram {
  position: relative;
  background-color: #fff;
  // top: 0;
  // left: 0;
  // right: 0;
  // bottom: 0;
  // width: 100%;
  // height: 100%;
  .FishBoneContent {
    position: relative;
    // margin-top: 200px;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    // width: calc(100% - 300px);
    // width: 100%;
    margin: 0 80px;
    height: 10px;
    background-color: $mainColor;
    .titleRight {
      position: absolute;
      top: 50%;
      transform: translate(9px, -50%);
      width: 115px;
      min-height: 20px;
      line-height: 20px;
      font-size: 14px;
      word-break: break-all;
    }
    .fish {
      position: absolute;
      // width: 0;
      // height: 0;
      // right: 0;
      top: 50%;
      transform: translate(99%, -50%);
      // border: 15px solid transparent;
      // border-left-color: $mainColor;
    }
    .f_head {
      right: 10px;
    }
    .f_tail {
      left: -150px;
    }
    .Level1Content {
      position: absolute;
      /*border: 1px solid #ddd;*/
      // width: 400px;
      // height: 300px;
      // top: auto;
      bottom: 10px;
      right: 50px;

      //画斜线
      .Level1Line {
        position: absolute;
        width: 3px;
        transform: rotate(-30deg);
        transform-origin: center bottom;
        background-color: $mainColor;
        left: 0;
        // right: 0;
        bottom: 0;
        // &:before {
        //   content: "";
        //   position: absolute;
        //   width: 0;
        //   height: 0;
        //   bottom: 0;
        //   left: 50%;
        //   transform: translate(-50%, 99%);
        //   border: 5px solid transparent;
        //   border-top-color: #93abc7;
        // }
        .Level1Text {
          position: absolute;
          top: -15px;
          left: 50%;
          transform: rotate(30deg) translate(-50%, 0);
          font-weight: bold;
          font-size: 15px;
          cursor: pointer;
        }
      }

      &:nth-child(2n + 1) {
        top: 10px;
        bottom: auto;
        .Level1Line {
          top: 0;
          transform-origin: center top;
          transform: rotate(30deg);
          .Level1Text {
            top: auto;
            left: 50%;
            bottom: -15px;
            transform: rotate(-30deg) translate(-50%, 0);
          }
          // &:before {
          //   top: 0;
          //   left: 50%;
          //   transform: translate(-50%, -99%);
          //   border: 5px solid transparent;
          //   border-bottom-color: $mainColor;
          // }
        }
      }
      .Level1ChildrenContent {
        // position: absolute;
        // width: 100%;
        // right: 0;
        // max-width: 400px;
        // height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        &.bottomContent {
          justify-content: flex-start;
          .Level1ChildItem {
            margin: 10px 0 0 5px;
          }
        }
        .Level1ChildItem {
          position: relative;
          // text-align: right;
          margin: 0 0 10px 5px;
          font-size: 12px;
          z-index: 1000;
          .LevelText {
            display: flex;
            align-items: center;
            // justify-content: flex-end;
            // height: 20px;
            // line-height: 20px;
          }
          // .pcc {
          // margin-bottom: 15px;
          // margin-right: 15px;
          // align-items: center;
          // width: 100%;
          .pn {
            color: #999;
          }
          .ttl {
            cursor: pointer;
            height: 32px;
          }
          .detail {
            // flex: 1;
          }
          .num {
            color: $mainColor;
            width: 10px;
            margin-right: 5px;
          }
          .score {
            font-size: 14px;
            color: $color120;
            margin-left: 5px;
          }
          // }
        }
      }
    }
  }
}
</style>
